<template>
  <div class="bgColor" :class="dayModel===false?'bFColor':''">
    <div class="sortFont">标签</div>
    <el-tag @click="getBlogByTag(-1)" class="myTag"  type="success" effect="plain" :style="routerName==='tag'?'':'display:none'">全部</el-tag>
    <el-tag @click="getBlogByTag(tag.id)" class="myTag"  v-for="tag in tags" :style="tId===tag.id?{background:tag.color,border:'0'}:{color:tag.color}" v-text="tag.name" type="success" :effect="tId===tag.id?'dark':'plain'"></el-tag>
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: "Type-T",
  data(){
    return{
      tags: []
    }
  },
  mounted(){
    axios.get("/listTag").then( (res) => {
      this.tags = res.data;
    })
  },
  computed: {
    dayModel(){
      return this.$store.state.dayModel;
    },
    routerName(){
      return this.$store.state.routerName;
    },
    tId(){
      return this.$store.state.tId;
    }
  },
  methods: {
    getBlogByTag(id){
        this.$store.commit("setTid",id)
    }
  }
}
</script>

<style scoped>
.bFColor {
  background-color: #2f3133 !important;
  color: white !important;
}
.myTag {
  margin-right: 20px;
  margin-top: 10px;
  cursor: pointer;
}
.bgColor {
  transition: all .5s linear;
  background-color: white;
  padding: 20px 10px;
  border-radius: 10px;
}
.sortFont {
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 20px;
}
</style>